<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="myIput" value="" />
    <button>点击</button>
    <script>
        // 浏览器事件
        /* 
            onload 
            onresize
            onscroll
        */
    //    表单事件 
    /* 
        change  :表单改变的时候触发
        input ：表单输入的时候触发
        focus ：表单具焦的时候触发
        blur： 表单失去焦点的时候触发
    */
   var myInpEle = document.querySelector(".myIput");
//    输入框改变的触发
//    myInpEle.onchange = function(){
//        console.log("输入框改变了");
//    }
// 输入框输入的时候触发
// myInpEle.oninput = function(){
//     console.log("表单输入的时候触发");
// }
// 输入框具焦的时候触发
// myInpEle.onfocus = function(){
//     console.log("聚焦了");
// }
// document.querySelector("button").onclick = function(){
//     myInpEle.focus();  // 让某个表单聚焦
// }


// 失去焦点的时候触发
// myInpEle.onblur = function(){
//     console.log("失去焦点触发");
// }

    </script>
</body>
</html>